<template>
  <div class="bottom_main">
    <ul class="flex Medium font_s18 colorF textC" style="background: #556969;border-radius: 5px 5px 0 0;line-height: 2.825rem;margin:0 1rem 0 2rem;">
      <li class="flex1">监管类型</li>
      <li class="flex1">公墓名称</li>
      <li class="flex1">派单时间</li>
      <li class="flex1">监管部门</li>
      <li class="flex3">监管进度</li>
    </ul>
    <div style="overflow:hidden;">
      <ul style="margin:0 1rem 0 2rem;" ref="doscroll" :class="{scrollAnimation:animate==true}">
        <li class="flex textC font_s16 colorF listItem" style="background:rgba(45, 67, 67, 1);margin-top:0.625rem;" v-for="item in dataList" v-bind:key="item.id">
          <span class="flex1 listItem">
            <p><img style="margin-right: 0.3rem;" src="../../assets/img/comprehensive/05.png" alt="">{{item.jglx}}</p>
          </span>
          <span class="flex1 listItem"> {{item.gmmc}}</span>
          <span class="flex1 listItem">{{item.pdsj}}</span>
          <span class="flex1 listItem">{{item.jgbm}}</span>
          <span class="flex3 listItem cursor" @click="sanlin=true">
            <img style="width: 95%;margin-top:0.825rem;" src="../../assets/img/comprehensive/63.png" alt="">
          </span>
        </li>
      </ul>
    </div>
    <!---------------- 组件调用 --------------->
    <ModalPolygon02 v-if="sanlin" @hidden="hiddenSanlin">
      <ListItem></ListItem>
    </ModalPolygon02>
  </div>
</template>
<script>
// import Modal from '@/components/Modal.vue'
import ModalPolygon02 from '@/components/ModalPolygon02.vue'
import ListItem from './bottom/ListItem'

export default {
  name: 'ComBottom',
  components: {
    // Modal,
    ModalPolygon02,
    ListItem
  },
  data () {
    return {
      jinqiao: false,
      sanlin: false,
      yangjin: false,
      animate: false,

      dataList: [
        { 'jglx': '风险监管', 'gmmc': '浦东新区三林静园', 'pdsj': '2019/3/27', 'jgbm': '民政局' },
        { 'jglx': '风险监管', 'gmmc': '洋泾乡安息堂', 'pdsj': '2019/3/20', 'jgbm': '民政局' },
        { 'jglx': '风险监管', 'gmmc': '金桥乡息安堂', 'pdsj': '2019/3/20', 'jgbm': '民政局' }
      ]
    }
  },
  methods: {
    hiddenJinqiao () {
      this.jinqiao = false
    },
    hiddenSanlin () {
      this.sanlin = false
    },
    hiddenYangjin () {
      this.yangjin = false
    },
    scroll () {
      // 获取DOM节点元素
      let doscroll = this.$refs.doscroll
      // 为节点元素添加/改变 margin-top 属性的值
      doscroll.style.marginTop = '-6.25rem'
      this.animate = !this.animate
      var that = this
      setTimeout(function () {
        // 将列表中第一条数据添加到列表末尾
        that.dataList.push(that.dataList[0])
        // 删除列表中第一条数据
        that.dataList.shift()
        // 将节点元素 margin-top 属性值重置为0
        doscroll.style.marginTop = '0rem'
        // 防止列表滚动动画回滚
        that.animate = !that.animate
      }, 1000)
    }
  },
  created () {
    // 重复执行,实现列表不断滚动的效果
    // var animation_scroll = setInterval(this.scroll, 2500)
  }
}
</script>
<style lang="scss" scoped>
.bottom_main{
  height: 30%;
  width: 75%;
  position: absolute;
  top: 65%;
  right: 0;
  overflow: hidden;
  .scrollAnimation {
    transition: all 2s;
  }
  .listItem{
    // margin-top: 0.685rem;
    height: 4.825rem;
    line-height: 4.825rem;
    box-sizing: border-box;
    // transition: all 1s;
  }
}
</style>
